<template>
  <div class="mappage-comp-ct">
  <mt-header title="百度地图" fixed>
    <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
  </mt-header>
    <div>
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="mapReady" ak="FVIl57x6XyoFs4e76FBPVKZ3Go6lzIzF"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        <!-- <bm-marker :position="mark.point" :dragging="false" v-for="mark in mark_list" :key="mark.id" animation="BMAP_ANIMATION_BOUNCE">
        </bm-marker> -->
      </baidu-map>
      <hr>
      <mt-button type="primary" @click="location">定位测试</mt-button>
      <mt-button type="primary" @click="zoom_fun">zoomIn</mt-button>
      <mt-button type="primary" @click="zoomOut_fun">zoomOut</mt-button>
      <hr>
      <mt-button type="primary" @click="getOverlays_fun">getOverlays</mt-button>
    </div>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
import coordinateFix from '@/cordova_plugins/coordinateFix.js'
export default {
  name: 'mappage',
  data() {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
      mark_list:[],
      my_map:false,
      my_BMap:false,
      sel_marker:false
    }
  },
  methods: {
    location() {
      //this重新指定，getCurrentPosition中的回调中this并非期望的vuethis
      var me = this
      if(me.GLOBAL.plusReady){
        navigator.geolocation.getCurrentPosition(
        function(position){
          //position不是json，无法用stringify输出
          // alert('Latitude: '        + position.coords.latitude          + '\n' +
          //     'Longitude: '         + position.coords.longitude         + '\n' +
          //     'Altitude: '          + position.coords.altitude          + '\n' +
          //     'Accuracy: '          + position.coords.accuracy          + '\n' +
          //     'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
          //     'Heading: '           + position.coords.heading           + '\n' +
          //     'Speed: '             + position.coords.speed             + '\n' +
          //     'Timestamp: '         + position.timestamp                + '\n');
          
          //坐标系修正
          let fixposition = coordinateFix.wgs84tobd09(position.coords.longitude,position.coords.latitude) 
          let point = new me.my_BMap.Point(fixposition[0],fixposition[1])
          me.toCenter(point,me.zoom)
          if(!me.sel_marker){
            //当前位置点
            me.sel_marker = new me.my_BMap.Marker(point)
            me.addMarkPoint(me.sel_marker)
          }else{
            me.sel_marker.setPosition(point)
          }
        }, function(erro){
          alert('erro'+JSON.stringify(erro))
        });
      }else{
        //无真机测试
        //坐标系修正
        let fixposition = coordinateFix.wgs84tobd09(108.347894,22.819187) 
        let point = new me.my_BMap.Point(fixposition[0],fixposition[1])
        me.toCenter(point,me.zoom)
        if(!me.sel_marker){
          //当前位置点
          me.sel_marker = new this.my_BMap.Marker(point)
          me.addMarkPoint(me.sel_marker)
        }else{
          me.sel_marker.setPosition(point)
        }
      }
    },
    getOverlays_fun(){
        console.log(this.my_map.getOverlays())
    },
    addMarkPoint(mark){
      this.my_map.addOverlay(mark)
    },
    toCenter({lng,lat},zoom){
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = zoom?zoom:this.zoom
    },
    mapReady({BMap, map}){
      //实例
      this.my_map = map
      this.my_BMap = BMap
      // console.log(BMap, map)
      let point  =  {lng:108.327,lat:22.823}
      this.toCenter(point,17)
      if(!this.sel_marker){
          this.sel_marker = new this.my_BMap.Marker(point)
          this.addMarkPoint(this.sel_marker)
      }
    },
    syncCenterAndZoom (e) {
      //双向绑定center与zoom信息,baidu-map的center并不会双绑，需要再moveing等事件中写入center
      // console.log(e.target)
      // const {lng, lat} = e.target.getCenter()
      let point = e.target.getCenter()
      this.toCenter(point,e.target.getZoom())
    },
    zoom_fun(){
      this.my_map.zoomIn()
    },
    zoomOut_fun(){
      this.my_map.zoomOut()
    }
  },
  components: {
    BaiduMap,
    BmMarker
  }
}
</script>
<style lang="scss" scoped>
.mappage-comp-ct {
  .map{
    margin: 0px;
    width: 100%;
    height: 450px;
    border: 1px solid;
  }
}
</style>
